<script setup>
import { ref, reactive, getCurrentInstance, onMounted, watch, render } from "vue"

const instance = getCurrentInstance()
const _this = instance.appContext.config.globalProperties //vue3获取当前this

// 组件中使用，接收传参的
let propsData = defineProps({
  searchForm: Object
})
// 组件中使用，接收事件的
const emits = defineEmits(['onSearch']);

const cameraOptions = [
  {id: 1, label: 'All', value: ''},
  {id: 2, label: 'cam1', value: '1'},
  {id: 3, label: 'cam2', value: '2'},
  {id: 4, label: 'cam3', value: '3'}
]

const unitOptions = [
  {id: 1, label: 'All', value: ''},
  {id: 2, label: 'cam1', value: '1'},
  {id: 3, label: 'cam2', value: '2'},
  {id: 4, label: 'cam3', value: '3'}
]

const modelOptions = [
  {id: 1, label: 'All', value: ''},
  {id: 2, label: 'cam1', value: '1'},
  {id: 3, label: 'cam2', value: '2'},
  {id: 4, label: 'cam3', value: '3'}
]

const onSubmit = () => {
  emits('onSearch')
}
</script>

<template>
  <el-form :inline="true" :model="searchForm" class="form_search_table">
    <!-- <el-form-item label="Type">
      <el-select
        v-model="searchForm.ambulanceId"
        placeholder="Day"
        clearable
      >
        <el-option v-for="item in cameraOptions" :key="item.id" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item> -->
    <el-form-item label="Time Slot">
      <el-date-picker
        v-model="searchForm.date"
        value-format="YYYY-MM-DD"
        type="daterange"
        @change="onSubmit"
        range-separator="To"
        start-placeholder="Start date"
        end-placeholder="End date"
        clearable
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">Query</el-button>
    </el-form-item>
  </el-form>
</template>